<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <meta content="1 days" name="revisit-after" /> 
    <meta content="" name="keywords" /> 
    <meta content="" name="description" /> 
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /> 
    <meta content="yes" name="apple-mobile-web-app-capable" /> 
    <meta content="black" name="apple-mobile-web-app-status-bar-style" /> 
    <meta content="telephone=no" name="format-detection" /> 
    <meta content="false" id="twcClient" name="twcClient" />
    <link rel="stylesheet" href="css/style.css" />
    <script src="js/jquery-1.7.2.min.js"></script>
	<title>首页</title>
</head>

<body>
    <div class="addnav" id="nav">
        <ul>
            <li data-trigger="nav" data-nav="addIncome"><a href="javascript:;">增加收入</a></li>
            <li data-trigger="nav" data-nav="addPay" ><a href="javascript:;">增加支出</a></li>
            <li data-trigger="nav" data-nav="addTransfer" ><a href="javascript:;">增加转账</a></li>
        </ul>
    </div>

    <div id="addIncome" style="-webkit-transform: translate(0, 0);" class="page">
        <form>
                <ul class="form-list sub-list">
                    <li>
                        <label>金额:</label> 
                        <input type="text" name="money" class="ipt" value="8000.00"/>
                    </li>
                    <li>
                        <label>账户:</label>
                        <select name="account" class="select">
                            <option value="xianjin">现金</option>
                            <option value="yinghang" selected="selected">银行卡</option>
                            <option value="xingyong">信用卡</option>
                            <option value="zhifu">支付宝</option>
                        </select>
                    </li>
                    <li>
                        <label>类别:</label> 
                        <select name="category" class="select">
                            <option value="gongzi" selected="selected">工资</option>
                            <option value="jiangjin">奖金</option>
                        </select>
                    </li>
                    <li>
                        <label>时间:</label>
                        <input type="date" class="ipt"  name="date" value="2012-03-27" />
                    </li>
                    <li>
                        <label>备注:</label>
                           <textarea placeholder="请填写备注信息" class="ipt" style="height: 100px;"></textarea>
                    </li>
                    <li>
                        <input type="submit" class="button" value="保存" />
                        <a href="index.html" class="button">取消</a>
                        
                    </li>
                </ul>
            
        </form>
    </div>

     <div id="addPay" style="-webkit-transform: translate(100%, 0);" class="page">
        <form>
                <ul class="form-list sub-list">
                    <li>
                        <label>金额:</label> 
                        <input type="text" name="money" class="ipt" value="8000.00"/>
                    </li>
                    <li>
                        <label>账户:</label>
                        <select name="account" class="select">
                            <option value="xianjin">现金</option>
                            <option value="yinghang" selected="selected">银行卡</option>
                            <option value="xingyong">信用卡</option>
                            <option value="zhifu">支付宝</option>
                        </select>
                    </li>
                    <li>
                        <label>类别:</label> 
                        <select name="category" class="select">
                            <option value="gongzi" selected="selected">工资</option>
                            <option value="jiangjin">奖金</option>
                        </select>
                    </li>
                    <li>
                        <label>时间:</label>
                        <input type="date" class="ipt"  name="date" value="2012-03-27" />
                    </li>
                    <li>
                        <label>备注:</label>
                           <textarea class="ipt" style="height: 100px;">本月工资</textarea>
                    </li>
                    <li>
                        <input type="submit" class="button" value="保存" />
                        <a href="index.html" class="button">取消</a>
                        
                    </li>
                </ul>
            
        </form>
    </div>


 <div id="addTransfer" style="-webkit-transform: translate(200%, 0);" class="page">
        <form>
                <ul class="form-list sub-list">
                    <li>
                        <label>转出:</label> 
                        <select name="account" class="select">
                            <option value="xianjin">现金</option>
                            <option value="yinghang" selected="selected">银行卡</option>
                            <option value="xingyong">信用卡</option>
                            <option value="zhifu">支付宝</option>
                        </select>
                        
                    </li>
                    <li>
                        <label>转入:</label> 
                        <select name="account" class="select">
                            <option value="xianjin">现金</option>
                            <option value="yinghang" selected="selected">银行卡</option>
                            <option value="xingyong">信用卡</option>
                            <option value="zhifu">支付宝</option>
                        </select>
                    </li>
                    <li>
                        <label>金额:</label>
                        <input type="text" name="money" class="ipt" value="8000.00"/>
                        
                    </li>
                    <li>
                        <label>类别:</label> 
                        <select name="category" class="select">
                            <option value="gongzi" selected="selected">工资</option>
                            <option value="jiangjin">奖金</option>
                        </select>
                    </li>
                    <li>
                        <label>时间:</label>
                        <input type="date" class="ipt"  name="date" value="2012-03-27" />
                    </li>
                    <li>
                        <label>备注:</label>
                           <textarea class="ipt" style="height: 100px;">本月工资</textarea>
                    </li>
                    <li>
                        <input type="submit" class="button" value="保存" />
                        <a href="index.html" class="button">取消</a>
                        
                    </li>
                </ul>
            
        </form>
    </div>

<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">

//导航顶部切换
$('#nav').delegate('li[data-trigger=nav]', 'click', function(){
    togglePage(this.getAttribute('data-nav'), this, function() {
        console.log('id: ' + this.id);
        //这里是点击切换页面时候的回调函数，
        //可进行页面预先数据渲染
        //this是对要切换到的页面的dom节点引用，
        //可直接this.innerHTML = 'xxx'，进行页面更新
    });
});

//根据url 的 search值，定位页面切换
if (!!location.search) {
    var s = location.search.slice(1).split('&');
    togglePage(s[0], $('#nav li:nth('+ s[1] +')'), function(){
        console.log('id: ' + this.id);
        //这里是点击切换页面时候的回调函数，
        //可进行页面预先数据渲染
        //this是对要切换到的页面的dom节点引用，
        //可直接this.innerHTML = 'xxx'，进行页面更新
    });
}


</script>
</body>
</html>